<template>


    <el-menu active-text-color="#ffd04b" background-color="#545c64" :collapse="menuIsCollapse"
             class="el-menu-vertical-demo"
             :default-active="$route.path"
             text-color="#fff" :router="true">

        <el-row class="row-bg" justify="center">
            <el-col :span="5">
                <component :is="topIcon" class="icon2" @click="openOrClose"></component>
            </el-col>
        </el-row>


        <template v-for="(item1,index1) in menuList">
            <!-- 只有一级菜单 -->
            <el-menu-item :index="item1.path" v-if="item1.children == undefined && item1.meta.show == true"
                          @click="addTabItem(item1.meta.title,item1.path)">
                <component :is="item1.meta.icon" class="icon"></component>
                <span>{{ item1.meta.title }}</span>
            </el-menu-item>

            <!-- 二级菜单 -->
            <el-sub-menu :index="item1.path" v-if="item1.children != undefined && item1.meta.show == true">
                <template #title>
                    <component :is="item1.meta.icon" class="icon"></component>
                    <span>{{ item1.meta.title }}</span>
                </template>
                <template v-for="(item2, index2) in item1.children">
                    <el-menu-item :index="item2.path" v-if="item2.children == undefined && item2.meta.show == true"
                                  @click="addTabItem(item2.meta.title,item2.path)">
                        <component :is="item2.meta.icon" class="icon"></component>
                        {{ item2.meta.title }}
                    </el-menu-item>
                </template>
            </el-sub-menu>

        </template>

    </el-menu>


</template>

<script lang="ts" setup>
import {onMounted, ref, computed} from 'vue'
import appStore from "@/store/appStore.ts";
import {storeToRefs} from 'pinia'

const modules = import.meta.glob('@/views/**/*.vue');
const {menuList} = storeToRefs(appStore())
import {useRouter} from "vue-router";

const router = useRouter()


onMounted(() => {
    menuList.value.forEach((item: any) => {
        item.component = modules[item.viewPath]
        if (item.children) {
            item.children.forEach((item2: any) => {
                item2.component = modules[item2.viewPath]
            })
        }
        router.addRoute(item)
    })
})

const {menuIsCollapse, tabs} = storeToRefs(appStore())

const topIcon = ref("Expand")


const openOrClose = () => {
    topIcon.value = menuIsCollapse.value ? "Fold" : "Expand"
    menuIsCollapse.value = !menuIsCollapse.value
}
const addTabItem = (title: any, path: any) => {
    const val = {
        title: title,
        path: path
    }
    tabs.value.push(val)
}

</script>


<style scoped>
.icon {
    width: 16px;
    height: 16px;
    padding-right: 5px;
}

.icon2 {

    width: 16px;
    height: 16px;
    color: white;
    cursor: pointer;
    padding-top: 3px;
}
</style>
<style>
.el-aside {
    background-color: #545c64;
}

.el-menu {
    border-right: 0px;
}

.el-sub-menu__title {
    padding-right: 0px !important;
}

.el-menu--collapse {
    /*屏幕高度的占比 */
    min-height: calc(100vh - 60px);
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: calc(100vh - 60px);
}
</style>

